<template>
  <div class="index dis-f jc-sb">
    <div class="w-500">
      <con-box :isCurpointer="true" class="h-220" title="安全/环保（5）"
        @routerGo="handleRouterGo('/SafetyEnvironmentalProtection')">
        <radar-chart :indicator="safeIndicator" />
      </con-box>
      <con-box :isCurpointer="true" class="h-220 mt-10" title="品质管理（6）" @routerGo="handleRouterGo('/qualityManagement')">
        <radar-chart :indicator="qualityIndicator" backgroundImg="item1" />
      </con-box>
      <con-box :isCurpointer="true" class="h-220 mt-10" title="服务管理（9）" @routerGo="handleRouterGo('/serviceManagement')">
        <radar-chart :indicator="serviceIndicator" backgroundImg="item2" />
      </con-box>
      <con-box :isCurpointer="true" class="h-220 mt-10" title="运营绩效（9）"
        @routerGo="handleRouterGo('/operationPerformance')">
        <radar-chart :indicator="operationIndicator" backgroundImg="item3" />
      </con-box>
    </div>
    <div class="flex-1 pl-10 pr-10 dis-f fd-c jc-sb">
      <div class="dis-f pl-20 pr-20 jc-sb po-r t--20">
        <div class="w-152 dis-f">
          <div class="pic w-52 h-48"><img src="@/assets/images/gct_icon_qy.png" alt="" class="w-100p h-100p" /></div>
          <div class="text fz-14 pl-8 pt-8 c-fff">
            杭州市首批
            <br />
            鲲鹏企业
          </div>
        </div>
        <div class="w-200 dis-f">
          <div class="pic w-52 h-48"><img src="@/assets/images/gct_icon_qy.png" alt="" class="w-100p h-100p" /></div>
          <div class="text fz-14 pl-8 pt-8 c-fff">
            浙江财经大学校园
            <br />
            招聘战略合作伙伴
          </div>
        </div>
        <div class="w-136 dis-f">
          <div class="pic w-52 h-48"><img src="@/assets/images/gct_icon_qy.png" alt="" class="w-100p h-100p" /></div>
          <div class="text fz-14 pl-8 pt-8 c-fff">
            突出贡献
            <br />
            十强
          </div>
        </div>
        <div class="w-200 dis-f">
          <div class="pic w-52 h-48"><img src="@/assets/images/gct_icon_qy.png" alt="" class="w-100p h-100p" /></div>
          <div class="text fz-14 pl-8 pt-8 c-fff">
            浙江工商大学食品
            <br />
            与生物工程学院实
            <br />
            践教育基地
          </div>
        </div>
        <div class="flex-1 dis-f">
          <div class="pic w-52 h-48"><img src="@/assets/images/gct_icon_qy.png" alt="" class="w-100p h-100p" /></div>
          <div class="text fz-14 pl-8 pt-8 c-fff">
            突出贡献
            <br />
            台资企业
          </div>
        </div>
      </div>
      <con-box class="h-258 w-100p" title="工厂基本信息">
        <div class="w-628 h-170 dis-f m-auto flex-wrap-wrap">
          <div class="w-200 h-66 dis-f" v-for="(item, index) in 5" :key="index">
            <div class="icon w-66 h-66">
              <img src="@/assets/images/gct_icon_yqmj.png" alt="" class="w-100p h-100p rotate" />
              <img :src="require('@/assets/images/gc-' + index + '.png')" alt="" class="gc-img" />
            </div>
            <div class="pl-16 flex-1 dis-f fd-c jc-c">
              <div class="num fz-20 fw-700 font-num">{{ gcArrInfo[index] }}</div>
              <div class="fz-14 c-f2f6ff mt-6">{{ gcArr[index] }}</div>
            </div>
          </div>
        </div>
      </con-box>
    </div>
    <div class="w-500">
      <con-box class="h-482" title="透明工厂">
        <div class="p-28 h-100p">
          <div class="pic w-100p h-100p bd">
            <video muted autoplay="autoplay" loop="loop" controls ref="video1">
              <source src="@/assets/video/ls.mp4" type="video/mp4" />
            </video>
          </div>
        </div>
      </con-box>
      <con-box class="h-418 mt-10" title="数字孪生-工厂">
        <div class="p-28 h-100p">
          <div class="pic w-100p h-100p bd">
            <video muted autoplay="autoplay" loop="loop" controls ref="video2">
              <source src="@/assets/video/tm.mp4" type="video/mp4" />
            </video>
          </div>
        </div>
      </con-box>
    </div>
  </div>
</template>

<script>
// iui
import ConBox from "@/components/ConBox.vue";
import RadarChart from "@/components/RadarChart.vue";
import { getFactoryList } from "@/api/apis.js";
import mixins from "@/mixins/refresh";
export default {
  name: "index",

  components: {
    ConBox,
    RadarChart,
  },
  mixins: [mixins],
  data() {
    return {
      // fui
      factoryName: "",
      gcArr: ["园区面积(平方米)", "人员数量(人)", "工厂数量(个)", "产线数量(条)", "5G基站数量(个)"],
      gcArrInfo: [],
      safeIndicator: [
        { name: "工安运行天次", x: "px192", y: "py-10" },
        { name: "污水处理指标符合率", x: "px39", y: "py46" },
        { name: "废气处理指标符合率", x: "px300", y: "py46" },
        { name: "合规性项目\n符合率", x: "px110", y: "py96" },
        { name: "纠违、隐患及时\n整改率", x: "px296", y: "py96" },
      ],
      qualityIndicator: [
        { name: "进货不良率", x: "px137", y: "py13" },
        { name: "直通率", x: "px279", y: "py13" },
        { name: "客诉件数/客诉率", x: "px81", y: "py66" },
        { name: "工艺符合率", x: "px307", y: "py66" },
        { name: "工厂品质绩效得分/评级", x: "px51", y: "py114" },
        { name: "市场产品检核得分/评级", x: "px285", y: "py114" },
      ],
      serviceIndicator: [
        { name: "可用库存", x: "px186", y: "py7" },
        { name: "应出未出", x: "px255", y: "py9" },
        { name: "配送到货及时率", x: "px117", y: "py25" },
        { name: "订单满足率", x: "px294", y: "py31" },
        { name: "配送提货及时率", x: "px90", y: "py56" },
        { name: "新品铺货达成率", x: "px309", y: "py70" },
        { name: "当日出货进度", x: "px103", y: "py88" },
        { name: "新品铺货达成率", x: "px304", y: "py102" },
        { name: "当日排单进度", x: "px138", y: "py123" },
        { name: "成品出货配送在途追踪", x: "px264", y: "py125" },
      ],
      operationIndicator: [
        { name: "产量", x: "px232", y: "py2" },
        { name: "当日发货看单情况", x: "px96", y: "py13" },
        { name: "人员数量", x: "px276", y: "py27" },
        { name: "成品库存数量", x: "px78", y: "py51" },
        { name: "生产效率", x: "px290", y: "py66" },
        { name: "成品库龄预警", x: "px82", y: "py85" },
        { name: "千包耗能", x: "px290", y: "py103" },
        { name: "成品库位利用率", x: "px100", y: "py116" },
        { name: "7日成品库存", x: "px246", y: "py127" },
      ],
    };
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.stopVideo();
  },
  methods: {
    // hui
    /**
     * 初始化
     * @param name 描述信息
     * @return {*}
     */
    init() {
      this.queryFactoryList();
    },
    stopVideo() {
      this.$refs.video1.pause();
      this.$refs.video2.pause();
    },
    // 获取所有工厂基本信息
    async queryFactoryList() {
      let { code, data } =
        (await getFactoryList().catch((err) => {
          err;
        })) || {};
      if (code === 200) {
        const { area, personnel, factory, line, baseStation, factoryName } = data[0];
        this.factoryName = factoryName;
        this.gcArrInfo = [area, personnel, factory, line, baseStation];
      }
    },
    handleRouterGo(path) {
      this.$router.push({
        path,
        query: {
          factoryName: this.factoryName,
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
// jui

.font-num {
  font-weight: bold;
  font-style: italic;
  background-image: -webkit-linear-gradient(top, #ffffff, #14a9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bd {
  border: 1px solid #00a8ff;
  padding: 0 1px;
}

.pic {
  video {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.icon {
  position: relative;
}

.gc-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
}
</style>
